<template>
  <div class="assignments-page">
    <!-- 单元列表 -->
     <div class="unit-header">
      <div v-if="units.length < 0">
        本课程暂无作业以及测试
      </div>
      <div v-for="unit in units" :key="unit.id">
        <h2 class="unit-title">
        {{ unit.unit_title }}
      </h2>
      <div class="assignment-item" v-if="unit.homework_list.length>0">
        <h3>作业</h3>
        <div >
          <div class="assignment-item" v-for="assignment in unit.homework_list" :key="assignment.id">
            <div class="assignment-header" @click="toggleDetails(assignment.id)">
              <h2>{{ assignment.name}}</h2>
              <p>结束时间: {{ assignment.deadline }}</p>
              <p>提交情况: {{assignment.submit }}</p>
            </div>
            <transition name="fade">
              <div class="dropdown" :class="{ active: activeMoudle == assignment.id }">
                <div class="status-bar">
                  <div class="status-item" :class="{ active: hmkStage.currentStage == 0 }">
                    <span>提交作业阶段</span>
                  </div>
                  <!-- <div class="status-item" :class="{ active: assignment.currentStage == -1 }">
                    <span>作业批改阶段</span>
                  </div> -->
                  <div class="status-item" :class="{ active: hmkStage.currentStage == 1 }">
                    <span>成绩公布阶段</span>
                  </div>
                </div>
                <p>作业开始时间：{{ hmkStage.submissionTime }}</p>
                <p>截止时间：{{ hmkStage.deadline }}</p>
                <div v-if="hmkStage.currentStage == 1">
                  <p>最终得分： {{ getScore(hmkStage.getscore) }} </p>
                </div>
                <div v-if="hmkStage.currentStage == 0">
                      <button @click="goToAssignment(assignment.id)" class="start-button">
                      前往作业
                      </button>
                </div>
              </div>
            </transition>
          </div>
        </div>
      </div>
      <div class="assignment-item" v-if="unit.stu_test_list.length>0">
          <h3>测试</h3>
          <!-- <div v-if="unit.stu_test_list.length < 0">wu</div> -->
            <div v-if="unit.stu_test_list.length>0">
              <div class="assignment-item" v-for="test in unit.stu_test_list" :key="test.unit_test_id">
                <div v-if="test.unit_test_id>0" class="assignment-header"  @click="toggleTestDetails(test.unit_test_id)">
                  <h2>{{ test.title }}</h2>
                  <p>结束时间: {{ test.end_time }}</p>
                  <p>得分情况: {{ getScore(test.test_score) }}</p>
                </div>
                <transition name="fade">
                    <div class="dropdown" :class="{ active: activeTestMoudle == test.unit_test_id }">
                    <div class="status-bar">
                      <div class="status-item" :class="{ active: testStage.currentStage == 0 }">
                        <span>测试进行阶段</span>
                      </div>
                      <div class="status-item" :class="{ active: testStage.currentStage == 1 }">
                        <span>测试截止阶段</span>
                      </div>
                    </div>
                    <p>开始时间：{{ testStage.start_time }}</p>
                    <p>截止时间：{{ testStage.end_time }}</p>
                    <p>最终得分: {{ getScore(test.test_score) }}</p>
                    <div v-if="testStage.currentStage == 0">
                      <div v-if="getScore(test.test_score)!='未提交'">
                      <button class="end-button">
                      已作答
                      </button>
                    </div>
                    <div v-else>
                      <button @click="goToChapterTest(test.unit_test_id)" class="start-button">
                      前往测试
                      </button>
                    </div>
                    </div>
                  </div>
                </transition>
              </div>
          </div>
        </div>
      </div>
  </div>

  </div>
</template>

<script>
import api from '../api';

export default {
  name: 'AssignmentsPage',
  data() {
    return {
      hmkStage:{},
      testStage:{},
      units:[],
      semesterId:1,
      progressWidth: 50,
      completedModules: 4,
      totalModules: 8,
      userId: localStorage.getItem("userid"),
      unitId: 16,
      activeMoudle:null,
      activeTestMoudle:null
    };
  },
  computed: {
    progressBarWidth() {
      return `${(this.completedModules / this.totalModules) * 100}%`;
    },
    progressPercent() {
      return Math.round((this.completedModules / this.totalModules) * 100);
    },
  },
  created() {
    this.fetchUnits();
    // this.fetchUnitTests(); // 不再调用 API 获取单元测试数据
    const username = localStorage.getItem("username");
    console.log("Username:", username);
  },
  methods: {
    //得分情况
    getScore(num){
      if(num>-1 &&num!=null) return num+' 分'
      else return '未提交';
    },
    //加载作业列表
    fetchAssignments() {
      api.getAssignments(this.userId).then(response => {
        this.assignments = response.data.data;
      }).catch(error => {
        console.error('Failed to fetch assignments:', error);
      });
    },
    //加载单元作业和测试粗列表
      fetchUnits() {
      api.getUnitHmkTestBySem(this.semesterId,this.userId).then(response => {
        //嵌套单元粗列表：包括作业和测试
        this.units = response.data.data;
        console.log(JSON.stringify(this.units, null, 2));
      }).catch(error => {
        console.error('Failed to fetch assignments:', error);
      });
    },
    fetcheHmkStage(hmkId){
      api.getHmkStage(this.userId,hmkId).then(response => {
        this.hmkStage = response.data.data;
        this.activeMoudle=hmkId;
      }).catch(error => {
        console.error('Failed to fetch assignments:', error);
      });
    },
    fetchTestStage(testId){
      api.getTestStage(this.userId,testId).then(response => {
        this.testStage = response.data.data;
        this.activeTestMoudle=testId;
      }).catch(error => {
        console.error('Failed to fetch assignments:', error);
      });
    },
    // fetchUnitTests() {
    //   api.getUnitTests(this.unitId).then(response => {
    //     if (response.data.code === 'S0000') {
    //       this.unitTests = response.data.data;
    //     } else {
    //       console.error('Failed to fetch unit tests:', response.data.msg);
    //     }
    //   }).catch(error => {
    //     console.error('Failed to fetch unit tests:', error);
    //   });
    // },
    
    // toggleDetails(id) {  //展开作业列表
    //   this.assignments = this.assignments.map(assignment => {
    //     if (assignment.id === id) {
    //       assignment.expanded = !assignment.expanded;
    //     }
    //     return assignment;
    //   });
    // },
    // toTestDetails(id) {  //展开作业列表
    //   this.unitTests = this.unitTests.map(test => {
    //     if (test.unit_test_id === id) {
    //       test.expanded = !test.expanded;
    //     }
    //     return test;
    //   });
    // },
    goToAssignment(id) {
      this.$router.push({ name: 'AssignmentDetails', params: { id } });
    },
    goToChapterTest(testId) {
      this.$router.push({ name: 'ChapterTest', params: { test_id: testId } });
    },
    toggleDetails(id) {  //展开作业列表
      if (this.activeMoudle  === id) {
            this.activeMoudle  = null; 
          } else {
            this.fetcheHmkStage(id);
            // this.activeMoudle  = id; 
          }
    },
    toggleTestDetails(id) {  //展开作业列表
      if (this.activeTestMoudle  === id) {
            this.activeTestMoudle  = null; 
          } else {
            this.fetchTestStage(id);
            // this.activeTestMoudle  = id; 
          }
    }
  }
};
</script>

<style scoped>
.unit-title{
  display: flex;
  justify-content: flex-start; /* 将内容向左对齐 */
  margin:  30px;
}
.assignments-page {
  padding: 30px;
  background-color: #f9f9f9;
  margin: 0 150px 0 150px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.header h1 {
  margin: 0;
  font-size: 32px;
  color: rgba(0, 0, 0, 1);
  font-weight: bold;
  margin-top: 10px;
}
.search-input {
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.assignments-content {
  display: flex;
}
.assignments-list {
  flex: 3;
}
.no-assignments {
  padding: 20px;
  text-align: center;
  color: #888;
}
.side-panel {
  flex: 1;
  margin-left: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.assignment-item {
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 20px;
  padding: 10px 20px;
  background-color: #fff;
  transition: transform 0.3s ease;
}
.assignment-item:hover {
  transform: translateY(-5px);
}
.assignment-header {
  display: flex;
  justify-content:space-around;
  align-items: center;
  cursor: pointer;
}
.assignment-header h2 {
  margin: 0;
  color: #007bff;
}
.assignment-header p {
  margin: 0;
  color: #007bff;
}
.assignment-details {
  margin-top: 10px;
}
.status-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.status-item {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
  background-color: #f0f0f0;
  margin-right: 10px;
  color: #999;
}
.status-item.active {
  background-color: #007bff;
  color: #fff;
}
.status-item:last-child {
  margin-right: 0;
}
.progress-bar-fixed {
  width: 100%;
  height: 10px;
  background-color: #ddd;
  position: relative;
  border-radius: 5px;
  margin-bottom: 10px;
}
.progress {
  height: 100%;
  background-color: #007bff;
  border-radius: 5px;
}
.end-button{
    background-color: #737a82;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}
.start-button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}
.start-button:hover {
  background-color: #0056b3;
}
.progress-section {
  text-align: center;
  margin-bottom: 20px;
}
.courses ul {
  list-style: none;
  padding: 0;
}
.courses li {
  background-color: #f0f0f0;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
}
.courses li:last-child {
  margin-bottom: 0;
}
.toggle-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: #007bff;
}
.side-image {
  max-width: 100%;
  border-radius: 5px;
  margin-bottom: 20px;
}
.course-resource {
  display: flex;
  margin: 0px 0px 50px;
  padding: 20px 100px;
  background-color: #f9f9f9;
}

.main-content {
  flex: 3;
  padding: 20px;
  background-color: #ffffff;
  margin: 0px 40px 0px 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-align: left;
}

h3 {
  margin: 0px 0px 20px 0px;
  font-size: 32px;
}

.subtitle {
  font-size: 12px;
  color: #888;
  margin-left: 20px;
  margin-bottom: 20px;
}

.secondary-nav {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.nav-item {
  width: auto;
  padding: 10px 15px;
  color: #000;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s, border-bottom 0.3s;
}

.nav-item.active,
.nav-item:hover {
  color: #3b96ff;
  border-bottom: 2px solid #3b96ff;
}

.search-container {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 70px;
  padding: 5px 10px;
  border: 1px solid #2a82e4;
  border-radius: 25px;
  background-color: #fff;
}

.search {
  border: none;
  outline: none;
  padding: 5px;
  border-radius: 25px;
  flex: 1;
  margin-right: 10px;
}

.search-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.content {
  margin-top: 20px;
}

.module {
  margin-bottom: 20px;
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f1f4f9;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
}

.module-toggle {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  color: #2a82e4;
}

.module-toggle span {
  font-weight: bold;
}

.toggle-icon {
  display: inline-block;
  transition: transform 0.3s;
}

.toggle-icon.flipped {
  transform: rotate(180deg);
}

.module-body {
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-top: none;
  border-radius: 0 0 4px 4px;
}

.resource-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.resource-list li {
  padding: 5px 0;
}

.sidebar h3 {
  margin: 0px 0px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar h3 .left-content {
  flex: 1;
}

.sidebar h3 span {
  font-size: 10px;
  color: grey;
}

.sidebar-item {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}

.sidebar img {
  max-width: 100%;
  height: auto;
}

.sidebar {
  flex: 1;
  background-color: transparent;
  text-align: left;
}

.progress-section,
.related-courses {
  margin-bottom: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 15px;
}

.progress-section h3,
.related-courses h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.related-courses p {
  margin: 0;
  color: #3b96ff;
  font-size: 10px;
  cursor: pointer;
}

.related-courses ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.related-courses li {
  margin: 5px 0;
  color: #000;
  cursor: pointer;
}

.progress-bar {
  width: 100%;
  background-color: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
  margin: 10px 0px;
}

.progress-bar-inner {
  height: 20px;
  background-color: #3b96ff;
  width: 0;
  border-radius: 5px;
  transition: width 0.3s;
}

.resource-details > :nth-child(-n + 3) {
  padding: 0 5px;
}

.resource-list li.checked .resource-details,
.resource-list li.checked .resource-details .resource-type,
.resource-list li.checked .resource-details span,
.resource-list li.submitted .resource-details,
.resource-list li.submitted .resource-details .resource-type,
.resource-list li.submitted .resource-details span {
  color: green;
}

.resource-type {
  text-decoration: none;
  color: #3b96ff;
}

.module-progress {
  font-size: 12px;
  color: #888;
  float: right;
}
.dropdown {
      display: none;
      border: 1px solid #ccc;
      padding: 10px;
      background-color: #f9f9f9;
    }
.dropdown.active {
  display: block;
}
</style>
